<template>
	<view class="forget_pwd">
		<!-- #ifndef MP-WEIXIN -->
		<my-navbar leftText="忘记密码" @leftClick="leftClick"></my-navbar>
		<!-- #endif -->
		<view class="input_info">
				<view class="">
					<view class="sixteen label">手机号码</view>
					<input type="number" v-model="info.mobile" placeholder="请输入手机号码" placaholder-class="placehoder_class" />
				</view>
				<view class="">
					<view class="sixteen label">新密码</view>
					<input type="password" v-model="info.password" placeholder="请输入六位及以上的密码" placaholder-style="font-size:15px;" />
				</view>
				<view class="forget_pwd_val label">
					<view class="sixteen">确认新密码</view>
					<input type="password" v-model="info.repassword" placeholder="请再次确认登录密码" placaholder-class="placehoder_class" />
				</view>
				<move-verify @result="verifyResult" ref="verifyElement"></move-verify>
				<view class="">
					<view class="sixteen label" >验证码</view>
					<view class="get_code">
						<input type="number" v-model="info.msg_code" placeholder="请输入验证码" />
						<text @click.stop="getCode">{{tips}}</text>
					</view>
		
				</view>
			</view>
			<view class="form_submit">
				<view class="button" @click="submit">提交</view>
			</view>
			<u-verification-code :seconds="seconds"  ref="uCode" @change="codeChange"></u-verification-code>
		</view>
</template>

<script>
	import {$https} from '@/static/js/request.js';
	import moveVerify from '@/components/helang-moveVerify/helang-moveVerify.vue';
	export default {
		components: {
			moveVerify
		},
		data() {
			return {
				tips: '获取验证码',
				seconds: 60,
				background: {
					backgroundColor: 'F6F6F7'
				},
				code:'',	//滑块验证得到的code
				info:{
					password:'',
					repassword:'',
					mobile:'',
					msg_code:'',
				}
			}

		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				let volidPhone = this.volidPhone();
				if(this.code && volidPhone){
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						$https('GETN','sendMsgCode',{code:this.code,mobile:this.info.mobile},res=>{
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						},true)
					} else {
						this.$u.toast('倒计时结束后再发送');
					}					
				}else{
					if(!this.code ){
						this.$refs.verifyElement.reset();
						this.$u.toast('请拖动滑块验证');
					}
				}
			},
			submit(){
				let volid = this.volidInfo();
				if(volid){
					let data = JSON.parse(JSON.stringify(this.info));
					delete data.repassword;
					$https('POST','forgetPassword',data,res=>{
						if(res.data.errcode == 0){
							uni.navigateTo({
								url:'../account/login'
							})
						}else{
							this.$u.toast(res.data.errmsg);
						}
					},true)
				}
			},
			//验证表单
			volidInfo(){
				let info = this.info;
				let checkphone =  this.volidPhone();
				if(!checkphone){return false;}
				else if(!info.password){this.$u.toast('请输入新密码');return false;}
				else if(info.password.length<6){this.$u.toast('密码长度不得小于6位');return false;}
				else if(!info.repassword){this.$u.toast('请再次确认新密码');return false;}
				else if(info.repassword != info.password){this.$u.toast('两次密码不一致');return false;}
				else if(!this.code){this.$refs.verifyElement.reset();this.$u.toast('请拖动滑块验证');return false;}
				else if(!info.msg_code){this.$u.toast('请输入验证码');return false;}
				else return true;
			},
			//验证手机号
			volidPhone(){
				if(!this.info.mobile){
					this.$u.toast('请输入手机号');
					return false;
				}
				else if(!(/^((0\d{2,3}-\d{7,8})|(1[23567894]\d{9}))$/.test(this.info.mobile))){
					uni.showToast({
						title: '手机号格式错误',
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			//拖动滑块
			verifyResult(data){
				console.log(data)
				if(data.flag){
					$https('GET','getCode',{},res=>{
						if(res.data.errcode == 0){
							this.code = res.data.data.code;
						}else{
							this.$u.toast('验证失败，请重试');
							this.$refs.verifyElement.reset();
						}
					},true)
				}else{
					//验证失败
					return;
				}
			},
			
			leftClick() {
				// #ifdef H5
				window.history.back(-1);
				// #endif 
				// #ifndef H5
				uni.navigateBack({
					delta: 1
				});
				// #endif
			},
			
		},
		onShow() {

		}
	}
</script>

<style lang="scss" scoped>
	.forget_pwd {
		.input_info {
			padding: 14rpx 34rpx 0;
	
			input {
				border-bottom: 1px solid #ECECEC;
				width: 100%;
				font-size: 26rpx;
				padding: 6px 0 1px;
				font-size: 24rpx;
				
			}
			.label{
				font-size: 26rpx;
				color:#191919;
			}
		}
		.form_submit{
			.button{
				margin-top:200rpx;
			}
		}
		.input_info>view {
			margin-top: 20rpx;
	
			input {
				margin-top: 6rpx;
			}
		}
	
		.get_code {
			display: flex;
			justify-content: space-between;
			align-items: center;
	
			text {
				z-index: 10;
				position: absolute;
				right: 20rpx;
				background: #B3B3B3;
				padding: 6rpx 10rpx;
				color: $white;
				border-radius: 8rpx;
			}
		}
	}
	
	.placehoder_class {
		font-size: 50rpx;
		color:#C0C0C0;
	}
	
	.forget_pwd {
		.now_login {
	
			margin: 12px 0 31px;
			color: #9a9a9a;
		}
	
		.agreement {
			color: #59A88F;
		}
	}
	
</style>
